import React from 'react';
import { inject, observer } from 'mobx-react';
import { Popover } from 'antd';
import { WeaIntro } from 'ecCom';

import E9FreqUseMenuContent from '../E9FreqUseMenuContent';

const { Step } = WeaIntro;

@inject('portalIntroStore')
@inject('portalThemeStore')
@observer
class IntroStep3 extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
  }

  render() {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    const { freqUseMenuVisible, translatepage } = portalThemeStore;

    return (
      <Popover
        ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@gelal5`}
        trigger="click"
        placement="bottomLeft"
        content={
          <Step ecId={`${(this && this.props && this.props.ecId) || ''}_Step@odw5xs`} id={'portal-intro3'}>
            <E9FreqUseMenuContent
              ecId={`${(this && this.props && this.props.ecId) || ''}_E9FreqUseMenuContent@59fncw`}
              onVisibleChange={this.onVisibleChange}
            />
          </Step>
        }
        overlayClassName={translatepage == '1' ? 'e9header-freq-use-menu-overlay-tran' : 'e9header-freq-use-menu-overlay'}
        visible={freqUseMenuVisible}
        onVisibleChange={this.onVisibleChange}
        afterPopupVisibleChange={(v) => intro_step.intro3 && v && setTimeout(() => window.portal_intro.goToStep(3), 150)}
      >
        <div className="e9header-freq-use-menu-icon">
          <i className="icon-coms-classification" />
        </div>
      </Popover>
    );
  }

  onVisibleChange(visible) {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    !intro_step.intro3 && portalThemeStore.onFreqUseMenuVisibleChange(visible);

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      themeLayoutMask.style.display = 'block';
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }
}

export default IntroStep3;
